<!DOCTYPE html>
<html>

<head>
        <title>Leaflet ArcGIS Example</title>
       
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
       
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
       
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
        <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
        <div id="map"></div>
       
    <script>
        var map = L.map('map').setView([23.5, 121], 12);
        L.esri.basemapLayer('Streets').addTo(map);
        L.esri.dynamicMapLayer({
            url: 'http://localhost:6080/arcgis/rest/services/huadongtest/MapServer',
            // http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer
            // opacity: 0.7
        }).addTo(map);

        // L.esri.tiledMapLayer({
        //     url: 'http://localhost:6080/arcgis/rest/services/World/huadong/MapServer',
        //     maxZoom: 15
        // }).addTo(map);
        const point = new esri.geometry.Point(x, y); // 替换为经纬度
        const graphic = new esri.Graphic(point);
        map.view.graphics.add(graphic);

        // 空间查询示例
        const query = {
            geometry: map.view.extent,
            where: "your_condition"
        };
        queryTask.execute(query).then(response => {
            // 处理查询结果
        });
    </script>

</body>

</html>